import React, { RefObject, MutableRefObject } from 'react';
/**
 * Хук, позволяющий вызывать обработчик для кликов "вне" элемента.
 * @param {React.MutableRefObject<any>} ref - Референс на элемент.
 * @param {() => void} onClickOutside - Вызываемый при клике "вне" элемента обработчик.
 * @param {boolean} enabled - Запускает обработчик.
 */
export interface IUseOnClickOutside {
  ref: RefObject<any> | MutableRefObject<any>;
  onClickOutside: () => void;
  enabled: boolean;
}

/**
 * @function useOnClickOutside - Хук, позволяющий вызывать обработчик для кликов "вне" элемента.
 * @param {React.MutableRefObject<any>} ref - Референс на элемент.
 * @param {() => void} onClickOutside - Вызываемый при клике "вне" элемента обработчик.
 * @param {boolean} enabled - Запускает обработчик.
 */
export const useOnClickOutside = ({ref, onClickOutside, enabled}: IUseOnClickOutside) => {

    React.useEffect(() => {

        const handleClickOutside = (event: MouseEvent) => {

            event.stopPropagation();
            if (ref.current && !ref.current.contains(event.target)) {
                onClickOutside();
            }
        };

        if (enabled) {
            document.addEventListener("click", handleClickOutside);
        }

        return () => {
            document.removeEventListener("click", handleClickOutside);
        };


    }, [ref, onClickOutside, enabled]);
}
